<template>
  <div>
    <template v-if="ishead">
      <template v-if="itemdata.lMustInput === '1' && itemdata.lCanInput === '0'">
        <van-field :id="itemdata.sField" v-model="itemdata.value" required disabled clearable :label="itemdata.sTitle" :error-message="itemdata.errormsg" />
      </template>
      <template v-else-if="itemdata.lMustInput === '1'">
        <van-field placeholder="请输入" :id="itemdata.sField" v-model="itemdata.value" required disabled clearable :label="itemdata.sTitle" @click="openDatePicker(itemdata)" :error-message="itemdata.errormsg" />
      </template>
      <template v-else-if="itemdata.lCanInput === '0' && itemdata.idObject == 'weekreports'">
        <template v-if="itemdata.sField === 'bzjsrq'">
          <van-field :id="itemdata.sField" v-model="bzjsrqField" disabled clearable :label="itemdata.sTitle" :error-message="itemdata.errormsg" />
        </template>
        <template v-else-if="itemdata.sField === 'xzksrq'">
          <van-field :id="itemdata.sField" v-model="xzksrqField" disabled clearable :label="itemdata.sTitle" :error-message="itemdata.errormsg" />
        </template>
        <template v-else-if="itemdata.sField === 'xzjsrq'">
          <van-field :id="itemdata.sField" v-model="xzjsrqField" disabled clearable :label="itemdata.sTitle" :error-message="itemdata.errormsg" />
        </template>
        <template v-else>
            <van-field :id="itemdata.sField" v-model="itemdata.value" disabled clearable :label="itemdata.sTitle" :error-message="itemdata.errormsg" />
        </template>
      </template>
      <template v-else-if="itemdata.lCanInput === '0' && itemdata.idObject != 'weekreports'">
        <van-field :id="itemdata.sField" v-model="itemdata.value" disabled clearable :label="itemdata.sTitle" :error-message="itemdata.errormsg" />
      </template>
      <template v-else>
        <van-field :id="itemdata.sField" v-model="itemdata.value" placeholder="请输入" readonly clearable :label="itemdata.sTitle" @click="openDatePicker(itemdata)" :error-message="itemdata.errormsg" />
      </template>
    </template>
    <template v-else>
      <template v-if="itemdata.lMustInput === '1' && itemdata.lCanInput === '0'">
        <van-field :id="index + '_' + itemdata.sField" v-model="itemdata.value" required disabled clearable :label="itemdata.sTitle" :error-message="itemdata.errormsg" />
      </template>
      <template v-else-if="itemdata.lMustInput === '1'">
        <van-field placeholder="请输入" :id="index + '_' + itemdata.sField" v-model="itemdata.value" required clearable readonly :label="itemdata.sTitle" @click="openDatePicker(itemdata)" :error-message="itemdata.errormsg" />
      </template>
      <template v-else-if="itemdata.lCanInput === '0'">
        <van-field :id="index + '_' + itemdata.sField" v-model="itemdata.value" disabled clearable :label="itemdata.sTitle" :error-message="itemdata.errormsg" />
      </template>
      <template v-else>
        <van-field placeholder="请输入" :id="index + '_' + itemdata.sField" readonly v-model="itemdata.value" clearable :label="itemdata.sTitle" @click="openDatePicker(itemdata)" :error-message="itemdata.errormsg" />
      </template>
    </template>
    <van-popup v-model="datepickershow" round position="bottom">
      <van-datetime-picker v-model="currentDate" type="date" @confirm="selectedDate" :min-date="minDate" />
    </van-popup>
    <van-popup v-model="datetimeshow" round position="bottom">
      <van-datetime-picker v-model="currentDate" type="datetime" @confirm="selectedDateTime" />
    </van-popup>
    <van-popup v-model="yearmonthshow" round position="bottom">
      <van-datetime-picker v-model="currentYearMonth" type="year-month" @confirm="selectedYearMonth" />
    </van-popup>
  </div>
</template>
<script>
export default {
  data () {
    return {
      minDate: new Date(1900, 0, 1),
      yearmonthshow: false,
      currentYearMonth: new Date(),
      datepickershow: false,
      datetimeshow: false,
      clickmodel: {},
      currentDate: new Date()
    }
  },
  props: {
    bzjsrqField: {
      type: String,
      required: false
    },
    xzksrqField: {
      type: String,
      required: false
    },
    xzjsrqField: {
      type: String,
      required: false
    },
    itemdata: {
      type: Object,
      required: false
    },
    ishead: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      required: false
    }
  },
  methods: {
    openDatePicker (datamodel) {
      if (datamodel.value != null && datamodel.value !== undefined && datamodel.value !== '') {
        if (datamodel.sUITypeExp !== 'long') {
          datamodel.value = datamodel.value.substring(0, 10)
        }
        let newDate = new Date(datamodel.value.replace(/-/g, '/'))
        this.currentDate = new Date(newDate)
      }
      this.clickmodel = datamodel
      if (datamodel.sUITypeExp === 'long') {
        this.datetimeshow = true
      } else {
        this.datepickershow = true
      }
    },
    selectedDate () {
      // Toast('111"' + JSON.stringify(this.clickmodel))
      //console.log(this.currentDate)
      let year = this.currentDate.getFullYear() // 获取完整的年份(4位,1970-????)
      let month = this.currentDate.getMonth() // 获取当前月份(0-11,0代表1月)
      let day = this.currentDate.getDate() // 获取当前日(1-31)

      if (this.clickmodel.idObject === 'weekreports') {
        // 设置 本周开始日期
        this.clickmodel.value = this.getWeekStartDate(year, month, day)
        // 设置 本周结束日期
         this.$emit('update:bzjsrqField', this.getWeekEndDate(year, month, day))
        // 设置 下周开始日期
         this.$emit('update:xzksrqField', this.getNextWeekStartDate(year, month, day))
        // 设置 下周结束日期
         this.$emit('update:xzjsrqField', this.getNextWeekEndDate(year, month, day))
      } else {
        month += 1
        if (month < 10) {
          month = '0' + month
        }
        if (day < 10) {
          day = '0' + day
        }
        let dateString = year + '-' + month + '-' + day

        this.clickmodel.errormsg = ''
        this.clickmodel.value = dateString
      }

      this.datepickershow = false
    },
    selectedDateTime () {
      //console.log(this.currentDate)
      let year = this.currentDate.getFullYear() // 获取完整的年份(4位,1970-????)
      let month = this.currentDate.getMonth() + 1 // 获取当前月份(0-11,0代表1月)
      let day = this.currentDate.getDate() // 获取当前日(1-31)
      let hour = this.currentDate.getHours()
      let minute = this.currentDate.getMinutes()
      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      if (hour < 10) {
        hour = '0' + hour
      }
      if (minute < 10) {
        minute = '0' + minute
      }
      let dateString = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':00'
      this.clickmodel.value = dateString
      this.clickmodel.errormsg = ''
      this.datetimeshow = false
    },
    // 获得本周的开始日期
    getWeekStartDate (y, m, d) {
      var now = new Date(y, m, d) // 当前日期

      var nowDayOfWeek = now.getDay() || 7 // 今天本周的第几天
      var nowDay = now.getDate() // 当前日
      var nowMonth = now.getMonth() // 当前月
      var nowYear = now.getFullYear() // 当前年
      var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek + 1)
      return this.formatDate(weekStartDate)
    },
    // 获得本周的结束日期
    getWeekEndDate (y, m, d) {
      return this.formatDate(this.getWeekEndDateObj(y, m, d))
    },
    getWeekEndDateObj (y, m, d) {
      var now = new Date(y, m, d) // 当前日期
      var nowDayOfWeek = now.getDay() || 7 // 今天本周的第几天

      var nowDay = now.getDate() // 当前日
      var comp = nowDay + 7 - nowDayOfWeek
      // 周日就不用加了
      if (nowDayOfWeek === 0) {
        comp = nowDay
      }

      var nowMonth = now.getMonth() // 当前月
      var nowYear = now.getFullYear() // 当前年

      var weekEndDate = new Date(nowYear, nowMonth, comp)

      return weekEndDate
    },
    getNextWeekStartDate (y, m, d) {
      return this.formatDate(this.getNextWeekStartDateObj(y, m, d))
    },
    getNextWeekStartDateObj (y, m, d) {
      let date = this.getWeekEndDateObj(y, m, d)
      date.setDate(date.getDate() + 1)
      return date
    },
    getNextWeekEndDate (y, m, d) {
      let date = this.getWeekEndDateObj(y, m, d)
      date.setDate(date.getDate() + 7)
      return this.formatDate(date)
    },
    // 格式化日期：yyyy-MM-dd
    formatDate (date) {
      var myyear = date.getFullYear()
      var mymonth = date.getMonth() + 1
      var myweekday = date.getDate()

      if (mymonth < 10) {
        mymonth = '0' + mymonth
      }
      if (myweekday < 10) {
        myweekday = '0' + myweekday
      }
      return (myyear + '-' + mymonth + '-' + myweekday)
    },
    openYearMonth (datamodel) {
      if (datamodel.value != null && datamodel.value !== undefined && datamodel.value !== '') {
        datamodel.value = datamodel.value.substring(0, 7)
        this.currentYearMonth = new Date(datamodel.value)
      }
      this.clickmodel = datamodel
      this.yearmonthshow = true
    },
    selectedYearMonth () {
      //console.log(this.currentYearMonth)
      let year = this.currentYearMonth.getFullYear()
      let month = this.currentYearMonth.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      let datestring = year + '-' + month
      this.clickmodel.value = datestring
      this.clickmodel.errormsg = ''
      this.yearmonthshow = false
    }
  },
  activated () {

  }
}
</script>
